<template>
	<!-- 小说评论社区主容器 -->
	<view class="novel-community">
		<!-- 书籍滑动容器 - 使用swiper实现垂直滑动 -->
		<swiper class="novel-swiper" vertical :current="currentIndex" @change="handleSwiperChange" circular>
			<swiper-item v-for="(novel, index) in novels" :key="index">
				<view class="novel-card" :class="{ active: currentIndex === index }">
					<!-- 上部分：小说封面区域 -->
					<view class="novel-cover-area"
						:style="{ 'paddingTop': uni.getWindowInfo().safeAreaInsets.top+10 + 'px' }">
						<view class="cover-container">
							<image :src="`${baseURL}${novel.bookImage}`" mode="aspectFill" class="novel-cover"></image>

							<view class="novel-category-tag">{{ novel.category }}</view>
						</view>
						<view class="novel-basic-info">
							<text class="novel-title">{{ novel.bookName }}</text>
							<text class="novel-author">作者: {{ novel.author }}</text>
						</view>
					</view>

					<!-- 下部分：书评区域 -->
					<view class="novel-review-area">
						<view class="review-content">
							<!-- 标签区域 -->
							<view class="tags-section">
								<text class="section-label">内容标签</text>
								<view class="tags-container">
									<view class="tag-item" v-for="(tag, idx) in novel.tags" :key="idx">{{ tag }}</view>
								</view>
							</view>

							<!-- 评论区域 -->
							<view class="comments-section">
								<text class="section-label">读者评论</text>
								<scroll-view scroll-y enable-flex class="comment-scroll-view">
									<view class="comment-item">
										{{novel.commentContent}}
									</view>
								</scroll-view>
							</view>
						</view>
					</view>

					<!-- 右侧：互动按钮区域 -->
					<view class="interaction-buttons">
						<view class="interaction-button like-button" @click="handleLikeComment(novel)">
							<uni-icons type='heart' size="24" :color="getLikeIconColor(novel)"></uni-icons>
							<text>{{novel.likeCount}}</text>
						</view>
						<view class="interaction-button comment-button" @click="startReply(index)">
							<uni-icons type='chat' size="24"></uni-icons>
						</view>
						<view class="interaction-button share-button" @click="handleShare(novel)">
							<uni-icons type='redo' size=" 24"></uni-icons>
							<text>分享</text>
						</view>
						<view class="interaction-button save-button">
							<uni-icons type='download' size=" 24"></uni-icons>
							<text>收藏</text>
						</view>
					</view>

					<!-- 滑动提示 -->
					<view class="swipe-hint" v-if="0 === currentIndex">
						<text>上滑查看更多书籍</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>

	<!-- 评论弹窗组件 -->
	<Comment ref="commentComponentRef" />
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import Comment from './comment.vue';
	// 导入社区服务接口
	import { likeReviewAPI, pageReviewsAPI, unLikeReviewAPI } from '@/services/review';
	// 导入通用分页查询方法
	import { commonPageQueryData } from '@/services/global';
	import { baseURL } from '@/utils/config';
	import { PageParams } from '../../types/global';
	import { NovelReviewsEntity } from '../../types/review';

	/**
	 * 小说数据列表
	 * 存储当前显示的所有小说数据
	 */
	const novels = ref<NovelReviewsEntity[]>([]);

	/**
	 * 当前显示的小说索引
	 * 控制swiper组件显示第几本书
	 */
	const currentIndex = ref<number>(0);


	/**
	 * 加载状态
	 * 'more' - 可加载更多
	 * 'loading' - 正在加载中
	 */
	const loadingStatus = ref<string>('more');

	/**
	 * 评论组件引用
	 */
	const commentComponentRef = ref<InstanceType<typeof Comment> | null>(null);
	const currentNovelIndex = ref<number>(0);


	/**
	 * 是否加载完成
	 */
	const finish = ref<boolean>(false);

	/**
	 * 是否正在加载
	 */
	const isLoading = ref<boolean>(true);

	/**
	 * 分页参数
	 */
	const pageParams = {
		current: 1,
		size: 2
	};

	/**
	 * 查询参数
	 */
	const queryParams = ref({});

	/**
	 * 滑动状态标志
	 * 防止一次滑动触发多次切换
	 */
	const isSwiping = ref<boolean>(false);


		/**
		 * 处理分享
		 * @param novel 要分享的小说对象
		 */
		const handleShare = (novel : NovelReviewsEntity) => {
			uni.navigateTo({ url: '/pages/community/fenxiang/index'  })
		}

	/**
	 * 滑动到最后一个swiper时加载更多数据
	 * 替代原来的watch监听器
	 */
	const checkAndLoadMore = () => {
		// 确保novels数组有数据，并且当前索引是最后一个元素的索引，并且没有在加载中，并且没有加载完成
		if (novels.value.length > 0 && currentIndex.value === novels.value.length - 1 && !isLoading.value && !finish.value) {
			console.log('滑动到最后一个swiper，开始加载更多小说数据');
			loadMoreNovels();
		} else {
			// 如果不满足加载条件，输出具体原因
			if (novels.value.length === 0) console.log('未加载数据：novels数组为空');
			if (currentIndex.value !== novels.value.length - 1) console.log('未达到最后一个元素');
			if (isLoading.value) console.log('正在加载中，跳过加载更多');
			if (finish.value) console.log('已加载全部数据');
		}
	};

	/**
	 * swiper切换事件处理函数
	 * @param e - swiper组件的切换事件对象
	 * 处理书籍切换逻辑
	 */
	const handleSwiperChange = (e : any) => {
		console.log("handleSwiperChange", e)
		if (!isSwiping.value) {
			currentIndex.value = e.detail.current;
			// 切换后检查是否需要加载更多数据
			checkAndLoadMore();
		}
	};


	/**
	 * 加载更多小说数据
	 */
	const loadMoreNovels = async () => {
		await commonPageQueryData(
			pageReviewsAPI,
			novels,
			finish,
			isLoading,
			pageParams,
			queryParams
		);
	};

	/**
	 * 获取点赞图标颜色
	 * @param item 评论或回复项
	 * @returns 点赞图标颜色
	 */
	const getLikeIconColor = (item : NovelReviewsEntity) => {
		return item.isLiked ? '#f00' : '#999';
	};



	/**
	 * 处理评论点赞
	 * @param comment 要点赞的评论对象
	 */
	const handleLikeComment = (novel : NovelReviewsEntity) => {
		if (novel.isLiked) {
			//1.取消点赞
			unLikeReviewAPI(novel)
			novel.isLiked = !novel.isLiked;
			novel.likeCount = novel.likeCount - 1;
		} else {
			//2.点赞
			likeReviewAPI(novel)
			novel.isLiked = !novel.isLiked;
			novel.likeCount = novel.likeCount + 1;
		}


	};

	/**
	 * 打开评论弹窗
	 * @param index 小说索引
	 */
	const startReply = (index : number) => {
		currentNovelIndex.value = index;
		// 获取当前小说数据
		const novelData = novels.value[index];
		console.log('准备打开评论弹窗，小说数据:', novelData);
		// 通过调用子组件方法打开弹窗并传递小说数据
		if (commentComponentRef.value && novelData) {
			commentComponentRef.value.openCommentPopup(novelData);
			console.log('成功调用openCommentPopup方法并传递小说数据');
		} else {
			console.warn(commentComponentRef.value ? '小说数据不存在' : '评论组件引用未正确初始化');
		}
	}

	/**
	 * 页面加载时执行
	 */
	onLoad(async () => {
		try {
			// 初始加载小说数据
			await loadMoreNovels();
		} catch (error) {
			console.error('初始化加载失败:', error);
		}
	});
</script>

<style lang="scss" scoped>
	// 引入全局样式变量
	$primary-color: #4393e2; // 主色调：蓝色
	$secondary-color: #ff6b6b; // 次要色调：红色
	$accent-color: #4ecdc4; // 强调色：青色
	$text-primary: #333; // 主要文字颜色
	$text-secondary: #666; // 次要文字颜色
	$border-radius: 12px; // 统一圆角值

	// 小说评论社区页面主容器
	.novel-community {
		position: relative;
		height: 100vh;
		// 渐变背景
		overflow: hidden;

		// 小说swiper容器
		.novel-swiper {
			height: 100vh;

			// 小说卡片
			.novel-card {
				position: relative;
				height: 100vh;
				width: 100%;
				overflow: hidden;
				transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
				padding: 5px;
				display: flex;
				flex-direction: column;

				// 卡片激活状态样式
				&.active {
					transform: scale(1.02);
				}

				// 上部分：小说封面区域
				.novel-cover-area {
					flex: 3;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.cover-container {
						position: relative;
						width: 70%;
						height: 80%;
						display: flex;
						justify-content: center;
						align-items: center;

						.novel-cover {
							max-width: 100%;
							max-height: 100%;
							border-radius: 10px;
							// 增强阴影效果
							box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
							// 增加边框
							border: 4px solid rgba(255, 255, 255, 0.9);
						}

						.novel-category-tag {
							position: absolute;
							top: -10px;
							left: 50%;
							transform: translateX(-50%);
							// 渐变背景色
							background: linear-gradient(90deg, $primary-color, $accent-color);
							color: white;
							padding: 5px 15px;
							border-radius: 20px;
							font-size: 12px;
							font-weight: bold;
							z-index: 2;
							// 添加阴影
							box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
						}
					}

					.novel-basic-info {
						margin-top: 15px;
						text-align: center;
						padding: 0 20px;
						display: flex;
						flex-direction: column;

						.novel-title {
							font-size: 22px;
							font-weight: bold;
							color: $text-primary;
							display: block;
							text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
						}

						.novel-author {
							font-size: 14px;
							color: #555;
							display: block;
							margin-top: 5px;
							font-style: italic;
						}
					}
				}

				// 下部分：书评区域
				.novel-review-area {
					flex: 7;
					width: 94%;
					position: relative;
					background: rgba(255, 255, 255, 0.8);
					border-radius: $border-radius;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
					margin: 10px;
					margin-bottom: 20px;

					.review-content {
						display: flex;
						flex-direction: column;
						height: 100%;
						box-sizing: border-box;

						// 标签区域样式
						.tags-section {
							flex: 1;
							padding: 10px;

							.section-label {
								font-size: 16px;
								font-weight: bold;
								display: block;
								margin-bottom: 12px;
							}

							.tags-container {
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

								.tag-item {
									padding: 6px 15px;
									border-radius: 20px;
									font-size: 14px;
									border: 1px solid rgba(67, 147, 226, 0.3);
									transition: all 0.3s ease;
								}
							}
						}

						// 评论区域样式
						.comments-section {
							padding: 10px;
							flex: 3;
							position: relative;

							.section-label {
								font-size: 16px;
								font-weight: bold;
								display: block;
								margin-bottom: 12px;
							}


							.comment-scroll-view {
								height: 200px; // 设置固定高度以确保滚动正常工作
								width: 100%;
								display: flex;
								flex-direction: column;
								// 确保内容不会被padding撑开
								box-sizing: border-box;
							}

							.comment-item {
								padding: 15px;
								width: 100%;
								min-height: 100px;
								// 确保内容不会被padding和margin撑开
								box-sizing: border-box;
								// 文本样式设置
								white-space: pre-wrap;
								word-break: break-word;
								text-align: justify;
								font-size: 14px;
								color: $text-primary;
								line-height: 1.6;
								// 添加内边距防止文字太靠近边缘
								padding-right: 10px; // 确保右侧不会被遮挡
							}
						}
					}
				}

				// 右侧：互动按钮区域
				.interaction-buttons {
					position: fixed;
					top: 50%;
					right: 10px;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					z-index: 10;
					padding: 15px 10px;
					// 添加半透明边框
					border: 1px solid rgba(255, 255, 255, 0.3);
					border-radius: $border-radius;

					.interaction-button {
						// 基础交互按钮样式
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						transition: all 0.3s ease;
						padding: 10px 8px;
						margin: 10px 0;
						border-radius: 50px;

						// 点击效果
						&:active {
							background-color: rgba(0, 0, 0, 0.05);
						}


						// 图标样式
						uni-icons {
							font-size: 24px;
							margin-bottom: 3px;
							color: #333;
							transition: color 0.3s ease;
						}

						// 文本样式
						text {
							font-size: 12px;
							font-weight: 500;
							white-space: nowrap;
							color: #333;
							transition: color 0.3s ease;
						}

						// 按钮激活状态样式
						&.active {
							uni-icons {
								color: #ff4d4f;
							}

							text {
								color: #ff4d4f;
							}
						}
					}

					// 点赞按钮动画效果
					.like-button {
						animation: pulse 2s infinite;
					}

					// 点赞按钮脉冲动画
					@keyframes pulse {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}
					}
				}

				// 滑动提示
				.swipe-hint {
					position: absolute;
					bottom: 80px;
					left: 50%;
					transform: translateX(-50%);
					color: $text-primary;
					// 渐变背景
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.9) 100%);
					padding: 10px 20px;
					border-radius: 30px;
					font-size: 14px;
					font-weight: 500;
					animation: bounce 2s infinite;
					z-index: 3;
					// 添加阴影和边框
					box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
					border: 1px solid rgba(255, 255, 255, 0.5);
				}

				@keyframes bounce {

					0%,
					20%,
					50%,
					80%,
					100% {
						transform: translateY(0) translateX(-50%);
					}

					40% {
						transform: translateY(-10px) translateX(-50%);
					}

					60% {
						transform: translateY(-5px) translateX(-50%);
					}
				}
			}
		}
	}
</style>